import React, { Component } from 'react';
import { NavBar, Icon } from 'antd-mobile';
import style from './index.module.scss'

const list = [
  {
    searchid: '1',
    content: '啊啊啊啊啊啊啊啊',
    hot: true
  },
  {
    searchid: '2',
    content: '啊啊啊啊啊',
    hot: true
  },
  {
    searchid: '3',
    content: '啊啊啊啊啊',
    hot: true
  },
  {
    searchid: '4',
    content: '啊啊啊不啊啊啊',
    hot: false
  },
  {
    searchid: '5',
    content: '啊啊啊啊啊',
    hot: false
  },
  {
    searchid: '6',
    content: '啊啊啊啊啊啊啊啊',
    hot: false
  },
]



class Com extends Component {
  state={
    searchlist: list
  }
  render() {
    return (
      <div className='box'>
        {/* 头部 */}
        <header className='header' style={{marginBottom: '0.25rem'}}>
          <NavBar
            mode="light"
            // icon={<Icon type={require('./../../left.svg')} />}
            icon={ <Icon type="left" key='0' color='#00B145'/>}
            onLeftClick={() => {
              this.props.history.go(-1)
            }}
            rightContent={[
              <span key='1' style={{color: '#00B145'}}>搜索</span>
            ]}
            ><input type="text" placeholder='搜索目的地' 
            style={{width: '2.60rem', 
                    border: '1px solid #ccc', 
                    outline: 'none', 
                    background: 'url("/images/sousuo.png") no-repeat 0.05rem center',
                    backgroundSize: '0.15rem',
                    paddingLeft: '0.25rem'
                    }}
                    onClick={()=>{}}/>
          </NavBar>
        </header>
        <div className="content">
          {/* 热搜榜 */}
          <p style={{paddingLeft: '0.15rem', fontWeight: '600', color:'rgba(51,51,51,1)'}}>热搜榜</p>
          <div className={style.search}>
            {
              this.state.searchlist.map(item=>{
              return <p key={item.searchid}>{item.content} {item.hot ? <img src="/images/huomiao.png" alt="" style={{width: '0.08rem' }}/> : ''}</p>
              })
            }
          </div>
          {/* 搜索历史 */}
          <p style={{margin: ' 0 0.15rem', marginBottom:'0.15rem', fontWeight: '600', color:'rgba(51,51,51,1)', background: 'url("/images/查看.png") no-repeat right center', backgroundSize: '0.1rem'}}>搜索历史</p>
          <div className={style.history}>
            {
              this.state.searchlist.map(item=>{
                return <p key={item.searchid}>{item.content}</p>
              })
            }
          </div>
        </div>
      </div>
    );
  }
}

export default Com
